<template>
  <div>
    <div class="all-page">
      <div class="select-box">
        <span class="title">全国医院查询</span>
        <div class="provience-select">
          <div class="select-border">
            <el-select v-model="selectedProvince" @change="onProvinceChange" size="large" placeholder="省份">
              <el-option v-for="item in provinces" :key="item.value" :label="item.value"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="city-select">
          <div class="select-border">
            <el-select v-model="selectedCity" size="large" placeholder="城市">
              <el-option v-for="item in filteredCities" :key="item.value" :label="item.value"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="department-select">
          <div class="select-border">
            <el-select v-model="selectedDepart" size="large" placeholder="科室">
              <el-option v-for="item in departments" :key="item.value" :label="item.value"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <button class="select-buttom" @click="charFormsg">
          <span class="buttom-text">查询</span>
        </button>
      </div>

      <div class="box1">
        <span class="box-name">医院名称：{{ hospital1 }}</span>
        <span class="box-address">地址：{{ addr1 }}</span>
        <span class="box-introduction">简介：<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ intro1 }}
        </span>
      </div>
      <div class="box2">
        <span class="box-name">医院名称：{{ hospital2 }}</span>
        <span class="box-address">地址：{{ addr2 }}</span>
        <span class="box-introduction">简介：<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ intro2 }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import request from '../utils/request'

let hospital1 = ref('南昌大学第一附属医院高新医院')
let hospital2 = ref('南昌市第六医院')
let addr1 = ref('南昌市高新区昌东大道7889号')
let addr2 = ref('南昌市西湖区永叔路罗家塘24号')
let intro1 = ref('内科经过医院3年多的建设，人才梯队已经逐渐完善，从知名专家到普通医师都积累的大量的临床经验，加上辅助检查科室的逐渐完备，现已能提供内科系统各类疾病的规范诊断、治疗和健康指导，尤其在心、血管疾病、呼吸系统疾病、糖尿病、消化系统疾病等方面都形成了自己的一整套诊疗体系。')
let intro2 = ref('主治糖尿病、高血压、慢性阻塞性肺病、冠心病及老年性常见疾病等各种急慢性疾病 。实施治疗与预防相结合，中西医相结合，运用疾病分型、分期，科学化诊疗体系，对各类患者实施个体化、理性化、人性化和综合化治疗。')

let provinces = ref([{ value: '北京市' },
{ value: '天津市' },
{ value: '河北省' },
{ value: '山西省' },
{ value: '内蒙古自治区' },
{ value: '辽宁省' },
{ value: '吉林省' },
{ value: '黑龙江省' },
{ value: '上海市' },
{ value: '江苏省' },
{ value: '浙江省' },
{ value: '安徽省' },
{ value: '福建省' },
{ value: '江西省' },
{ value: '山东省' },
{ value: '河南省' },
{ value: '湖北省' },
{ value: '湖南省' },
{ value: '广东省' },
{ value: '广西壮族自治区' },
{ value: '海南省' },
{ value: '重庆市' },
{ value: '四川省' },
{ value: '贵州省' },
{ value: '云南省' },
{ value: '西藏自治区' },
{ value: '陕西省' },
{ value: '甘肃省' },
{ value: '青海省' },
{ value: '宁夏回族自治区' },
{ value: '新疆维吾尔自治区' },
{ value: '台湾省' },
{ value: '香港特别行政区' },
{ value: '澳门特别行政区' }]);
let cities = ref([{ "value": "石家庄", "province": "河北省" },
{ "value": "唐山", "province": "河北省" },
{ "value": "南昌", "province": "江西省" },
{ "value": "九江", "province": "江西省" }]);
let departments = ref([
  { "value": "内科" },
  { "value": "外科" },
  { "value": "妇产科" },
  { "value": "儿科" },
  { "value": "五官科" }
]);
let selectedProvince = ref()
let selectedCity = ref()
let selectedDepart = ref()

const filteredCities = computed(() => {
  return cities.value.filter(city => city.province === selectedProvince.value);
});

function charFormsg() {
  request.post('/ask/getHospitalByCityAndDept', {
    "province": selectedProvince.value,
    "city": selectedCity.value,
    "department": selectedDepart.value
  }).then((res) => {

    if (Array.isArray(res.data)) {
      if (res.data.length == 1) {
        hospital1.value = res.data[0].name
        intro1.value = res.data[0].intro
        addr1.value = res.data[0].addr
        hospital2.value = res.data[0].name
        intro2.value = res.data[0].intro
        addr2.value = res.data[0].addr
      }
      else if (res.data.length > 1) {
        hospital1.value = res.data[0].name
        hospital2.value = res.data[1].name
        intro1.value = res.data[0].intro
        intro2.value = res.data[1].intro
        addr1.value= res.data[0].addr
        addr2.value= res.data[1].addr
      } else {
        alert("没有查到数据");
      }
    } else {
      console.log("error")
    }
  }).catch((error) => {
    console.error('照片上传失败：', error);
  });
}

</script>

<style scoped>
* {
  box-sizing: border-box;
}

body {
  font-size: 14px;
}

.all-page {
  width: 100vw;
  height: 95vh;
  background: rgba(50, 73, 94, 1);
  opacity: 1;
  position: absolute;
  overflow: hidden;
}

.select-box {
  width: 100vw;
  height: 24vh;
  background: rgba(13, 40, 65, 1);
  opacity: 1;
  position: absolute;
  overflow: hidden;
}

.title {
  color: rgba(249, 249, 249, 1);
  position: absolute;
  top: 8vh;
  left: 3vw;
  font-family: Inter;
  font-weight: Extra Bold;
  font-size: 44px;
  opacity: 1;
  text-align: left;
}

.provience-select {
  width: 16vw;
  height: 40px;
  opacity: 1;
  position: absolute;
  top: 9vh;
  left: 394px;
  overflow: hidden;
}

.select-border {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 15px;
  overflow: hidden;
}

.selecter {
  width: 100%;
  height: 100%;
  color: rgba(50, 73, 94, 1);
  position: absolute;
  font-family: Inter;
  font-weight: Regular;
  font-size: 32px;
  opacity: 1;
  text-align: left;
}

.city-select {
  width: 16vw;
  height: 40px;
  opacity: 1;
  position: absolute;
  top: 9vh;
  left: 45vw;
  overflow: hidden;
}

.department-select {
  width: 16vw;
  height: 40px;
  opacity: 1;
  position: absolute;
  top: 9vh;
  left: 65vw;
  overflow: hidden;
}

.select-buttom {
  width: 12vw;
  height: 6vh;
  background: rgba(72, 100, 125, 1);
  opacity: 1;
  position: absolute;
  top: 9vh;
  right: 3vw;
  border-radius: 20px;
  overflow: hidden;
  border: none;
}

.buttom-text {
  width: 48px;
  color: rgba(255, 255, 255, 1);
  position: absolute;
  top: 0.5vh;
  left: 4.5vw;
  font-family: Inter;
  font-weight: Regular;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}

.box1 {
  width: 45vw;
  height: 60vh;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  position: absolute;
  bottom: 5vh;
  left: 3vw;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.box2 {
  width: 45vw;
  height: 60vh;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  position: absolute;
  bottom: 5vh;
  right: 3vw;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.box-introduction {
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 15vh;
  left: 2vw;
  font-family: Inter;
  font-weight: Regular;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}


.box-address {
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 10vh;
  left: 2vw;
  font-family: Inter;
  font-weight: Regular;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}


.box-name {
  width: 456px;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 2vh;
  left: 2vw;
  font-family: Inter;
  font-weight: Regular;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
</style>